<template>
	<div>
		<el-row>
			<el-col :span="24">
				<el-form :inline="true" :model="state.query">
					<el-form-item label="项目编号">
						<el-input clearable v-model="state.query.code" placeholder="项目编号" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="init">搜索</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-tabs v-model="state.activeName"  @tab-change="handleClick">
					<el-tab-pane v-for="(item,index) in state.labelList" :label="item" :name="index">

						<el-table :data="state.ProjectList" border style="width: 100%">
							<el-table-column prop="code" label="项目编号" align="center" width="160"/>
							<el-table-column  label="用户头像" align="center" width="120" >
								<template #default="props">
									<el-avatar :size="50" :src="props.row.adminCusUserVo.imageUrl" />
								</template>
							</el-table-column>
							<el-table-column prop="adminCusUserVo.nickName" label="用户昵称" align="center"></el-table-column>
							<el-table-column prop="projectName" label="项目名称" align="center" width="300"></el-table-column>
							<el-table-column prop="wxCode" label="联系方式" align="center"></el-table-column>
							<el-table-column prop="deliveryTime" label="交付日期" align="center" width="138">
								<template #default="props">
									{{ props.row.deliveryTime === null ? '-' : props.row.deliveryTime }}
								</template>
							</el-table-column>
							<el-table-column prop="createTime" label="提交时间" align="center" width="180"/>
							<el-table-column prop="status" label="项目进度" align="center" width="120">
								<template #default="props">
									<el-tag type="primary" v-if="props.row.status === 0">未审核</el-tag>
									<el-tag type="primary" v-else-if="props.row.status === 1">进行中</el-tag>
									<el-tag type="primary" v-else-if="props.row.status === 2">已完成</el-tag>
									<el-tag type="primary" v-else>未知进度</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="详情操作" align="center">
								<template #default="props">
									<el-button v-if="props.row.status === 0" link type="primary" size="small" @click="completion(props.row)">补全项目</el-button>
									<el-button v-if="props.row.status === 1" link type="primary" size="small" @click="completion(props.row)">修改内容</el-button>
									<el-button link type="primary" size="small" @click="info(props.row)">详情</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
				</el-tabs>
			</el-col>
		</el-row>
		<div class="pagination-container">
			<el-pagination
				:page-size="state.pageValidate.pageSize"
				layout="prev, pager, next"
				:total="state.pageValidate.total"
				@current-change="handleCurrentChange"
			/>
		</div>
		<ProjectDocComponents
			:visible=state.infoDialogVisible
			:user-info=state.userInfo
			:project-info=state.projectInfo
			@close-dialog="state.infoDialogVisible = false"
		/>
<!--		<el-dialog-->
<!--			v-model="state.completionDialogVisible"-->
<!--			title="补全信息"-->
<!--			width="50%"-->
<!--			:close-on-click-modal="false"-->
<!--			:close-on-press-escape="false"-->
<!--		>-->
<!--			&lt;!&ndash;			用户信息区域&ndash;&gt;-->
<!--			<el-card style="width: 100%;margin-bottom: 10px" shadow="never">-->
<!--				<template #header>-->
<!--					<div class="card-header">-->
<!--						<span>用户名片</span>-->
<!--					</div>-->
<!--				</template>-->
<!--				<el-row :gutter="20" style="height: 30px">-->
<!--					<el-col :span="6">-->
<!--						<el-avatar :size="50" :src="state.userInfo.imageUrl" />-->
<!--					</el-col>-->
<!--					<el-col :span="6">-->
<!--						用户昵称：{{state.userInfo.nickName}}-->
<!--					</el-col>-->
<!--					<el-col :span="6">-->
<!--						手机号：{{state.userInfo.cellPhone}}-->
<!--					</el-col>-->
<!--					<el-col :span="6">-->
<!--						用户编号：{{state.userInfo.id}}-->
<!--					</el-col>-->
<!--				</el-row>-->
<!--			</el-card>-->
<!--			<el-form-->
<!--				:model="state.completionForm"-->
<!--				label-width="auto"-->
<!--				ref="ruleFormRef"-->
<!--				:rules="rules"-->
<!--				style="width: 100%">-->
<!--				<el-form-item label="项目编号" prop="code">-->
<!--					<el-input v-model="state.completionForm.code" />-->
<!--				</el-form-item>-->
<!--				<el-form-item label="项目名称" prop="projectName">-->
<!--					<el-input v-model="state.completionForm.projectName" />-->
<!--				</el-form-item>-->
<!--				<el-form-item label="联系方式"  >-->
<!--					<el-input v-model="state.completionForm.wxCode" />-->
<!--				</el-form-item>-->

<!--				<el-form-item label="项目类型" prop="projectType">-->
<!--					<el-select v-model="state.completionForm.projectType" placeholder="请选择项目类型">-->
<!--						<el-option label="毕设" value="1" />-->
<!--						<el-option label="论文" value="2" />-->
<!--						<el-option label="课设" value="3" />-->
<!--						<el-option label="作业" value="4" />-->
<!--						<el-option label="考试" value="5" />-->
<!--						<el-option label="报告" value="6" />-->
<!--						<el-option label="项目" value="7" />-->
<!--						<el-option label="毕业全套" value="8" />-->
<!--					</el-select>-->
<!--				</el-form-item>-->
<!--				<el-row :gutter="20">-->
<!--					<el-col :span="10">-->
<!--						<el-form-item label="总金额" prop="amount">-->
<!--							<el-input-number v-model="state.completionForm.amount" :min="0.00" :max="5000" :precision="2" :step="10"/>-->
<!--						</el-form-item>-->
<!--					</el-col>-->
<!--					<el-col :span="12">-->
<!--						<el-form-item label="总金额付款状态">-->
<!--							<el-select v-model="state.completionForm.amountStatus" placeholder="请选择总金额付款状态">-->
<!--								<el-option label="未付款" :value=false />-->
<!--								<el-option label="已付款" :value=true />-->
<!--							</el-select>-->
<!--						</el-form-item>-->
<!--					</el-col>-->
<!--				</el-row>-->
<!--				<el-row :gutter="20">-->
<!--					<el-col :span="10">-->
<!--						<el-form-item label="定金">-->
<!--							<el-input-number v-model="state.completionForm.deposit" :min="0.00" :max="5000" :precision="2" :step="10"/>-->
<!--						</el-form-item>-->
<!--					</el-col>-->
<!--					<el-col :span="12">-->
<!--						<el-form-item label="定金付款状态">-->
<!--							<el-select v-model="state.completionForm.depositStatus" placeholder="请选择定金付款状态">-->
<!--								<el-option label="未付款" :value=false />-->
<!--								<el-option label="已付款" :value=true />-->
<!--							</el-select>-->
<!--						</el-form-item>-->
<!--					</el-col>-->
<!--				</el-row>-->
<!--				<el-row :gutter="20">-->
<!--					<el-col :span="12">-->
<!--						<el-form-item label="项目负责人">-->
<!--							<el-select-->
<!--								filterable-->
<!--								multiple-->
<!--								v-model="state.completionForm.director"-->
<!--								placeholder="请选择项目负责人"-->
<!--							>-->
<!--								<el-option-->
<!--									v-for="item in state.userList"-->
<!--									:key="item.id"-->
<!--									:label="item.nickName"-->
<!--									:value="item.id"-->
<!--								/>-->
<!--							</el-select>-->
<!--						</el-form-item>-->
<!--					</el-col>-->
<!--					<el-col :span="12">-->
<!--						<el-form-item label="项目负责人备注">-->
<!--							<el-input  :rows="2"-->
<!--												 type="textarea" v-model="state.completionForm.directorRemark" />-->
<!--						</el-form-item>-->
<!--					</el-col>-->
<!--				</el-row>-->
<!--				<el-row :gutter="20">-->
<!--					<el-col :span="12">-->
<!--						<el-form-item label="项目开发者">-->
<!--							<el-select-->
<!--								filterable-->
<!--								multiple-->
<!--								v-model="state.completionForm.developer"-->
<!--								placeholder="请选择项目开发者"-->
<!--							>-->
<!--								<el-option-->
<!--									v-for="item in state.userList"-->
<!--									:key="item.id"-->
<!--									:label="item.nickName"-->
<!--									:value="item.id"-->
<!--								/>-->
<!--							</el-select>-->
<!--						</el-form-item>-->
<!--					</el-col>-->
<!--					<el-col :span="12">-->
<!--						<el-form-item label="项目开发者备注">-->
<!--							<el-input  :rows="2"-->
<!--												 type="textarea" v-model="state.completionForm.developerRemark" />-->
<!--						</el-form-item>-->
<!--					</el-col>-->
<!--				</el-row>-->
<!--				<el-form-item label="交付时间">-->
<!--					<el-input   v-model="state.completionForm.deliveryTime" />-->
<!--				</el-form-item>-->
<!--				<el-form-item label="交付内容">-->
<!--				<el-input  :rows="2" type="textarea" v-model="state.completionForm.deliveryContent" />-->
<!--				</el-form-item>-->
<!--			</el-form>-->
<!--			<template #footer>-->
<!--      <span class="dialog-footer">-->
<!--        <el-button @click="submitForm(ruleFormRef)">确 定</el-button>-->
<!--      </span>-->
<!--			</template>-->
<!--		</el-dialog>-->
<!--		<el-dialog-->
<!--			v-model="state.manualDialogVisible"-->
<!--			title="手动录入"-->
<!--			width="50%">-->
<!--			<el-form-->
<!--				ref="formRef"-->
<!--				:model="state.palyForm"-->
<!--				label-width="120px">-->
<!--				<el-form-item-->
<!--					prop="payMenoy"-->
<!--					:rules="[{required: true, message: '支付金额不能为空',trigger: 'blur',} ]"-->
<!--					label="支付金额">-->
<!--					<el-input-number :step="0.1" v-model="state.palyForm.payMenoy" :min="0.00" :max="100000" />-->
<!--				</el-form-item>-->
<!--				<el-form-item prop="payType" label="支付方式" :rules="[{required: true, message: '支付方式不能为空',trigger: 'blur',} ]">-->
<!--					<el-select v-model="state.palyForm.payType" placeholder="请选择支付方式">-->
<!--						<el-option label="淘宝" value="0" />-->
<!--						<el-option label="支付宝" value="1" />-->
<!--						<el-option label="微信" value="1" />-->
<!--					</el-select>-->
<!--				</el-form-item>-->
<!--				<el-form-item label="支付时间">-->
<!--					<el-input v-model.number="state.palyForm.createTime" />-->
<!--				</el-form-item>-->
<!--				<el-form-item label="支付备注">-->
<!--					<el-input v-model.number="state.palyForm.remark" />-->
<!--				</el-form-item>-->

<!--				<el-form-item label="支付凭证">-->
<!--					<el-upload-->
<!--						v-model:file-list="fileList"-->
<!--						action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"-->
<!--						list-type="picture-card"-->
<!--						:on-preview="handlePictureCardPreview"-->
<!--						:on-remove="handleRemove"-->
<!--					>-->
<!--						<el-icon><Plus /></el-icon>-->
<!--					</el-upload>-->
<!--				</el-form-item>-->

<!--			</el-form>-->

<!--			<template #footer>-->
<!--      <span class="dialog-footer">-->
<!--        <el-button @click="state.manualDialogVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="payFormBtn(formRef)">确定</el-button>-->
<!--      </span>-->
<!--			</template>-->
<!--		</el-dialog>-->
	</div>
</template>
<script setup lang="ts">
import type { UploadProps,UploadUserFile } from 'element-plus'
import { postRequest } from '~/composables/http'
import type {FormInstance, FormRules ,TabPaneName} from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const formRef = ref<FormInstance>()
const state = reactive(<any>{
	path:"",
	DomenetFrom:{},
	viewDialogVisible:false,
	domenentDialogVisible:false,
	infoDialogVisible: false,
	manualInputdialogVisible:false,
	palyForm:{},
	activeName:0,
	labelList:["未审核","进行中","已完成"],
	manualDialogVisible: false,
	completionDialogVisible: false,
	pageValidate: {
		pageNo: 1,
		pageSize: 8,
		total: 0
	},
	query: {
		status: 0,
		code:""
	},
	ProjectList: [],
	updateFrom: {
		id: '',
		nickName: '',
		cellPhone: '',
		// imageUrl: '',
		status: '',
		roleType: ''
	},
	userInfo:{},
	projectInfo:{},
	completionForm:{},
	userList:[],
	orderList:[],
	manualFrom:{
		isPayment:"3"
	}
})
const fileList = ref<UploadUserFile[]>([
	{
		name: 'food.jpeg',
		url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
	}
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)


//
// const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
// 	console.log(uploadFile, uploadFiles)
// }
//
// const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
// 	dialogImageUrl.value = uploadFile.url!
// 	dialogVisible.value = true
// }
//
// const rules = reactive<FormRules<any>>({
// 	code: [
// 		{ required: true, message: '项目编号不能为空', trigger: 'blur' },
// 	],
// 	projectName: [
// 		{ required: true, message: '项目名称不能为空', trigger: 'blur' },
// 	],
// 	projectType: [
// 		{ required: true, message: '项目类型不能为空', trigger: 'blur' },
// 	],
// 	amount: [
// 		{ required: true, message: '总金额不能为空', trigger: 'blur' },
// 	],
// })
//

// function addDocumentBtn() {
// 	state.DomenetFrom.projectId = state.projectInfo.id
// 	state.DomenetFrom.code = state.projectInfo.code
// 	state.DomenetFrom.providerId = state.projectInfo.providerId
// 	http.post("/api/admin/project/add",state.DomenetFrom).then(res =>{
// 		state.domenentDialogVisible = false
// 	})
// }


//标签页点击
const handleClick = (name: TabPaneName) => {
	state.query.status = name
	init()
}
/**
 * 详情信息
 */
const info = (row:any) => {

	state.infoDialogVisible = true
	state.userInfo = row.adminCusUserVo
	state.projectInfo = row
}


/**
 * 支付表单提交
 */

// const payFormBtn = (formEl: FormInstance | undefined) => {
// 	if (!formEl) return
// 	formEl.validate((valid) => {
// 		if (valid) {
// 			console.log('submit!')
// 		} else {
// 			console.log('error submit!')
// 			return false
// 		}
// 	})
// }
/**
 * 补全项目
 */
const completion = (row:any) => {
	state.completionDialogVisible = true
	state.userInfo = row.adminCusUserVo
	state.completionForm = row
	state.completionForm.projectType = row.projectType.toString()
	delete state.completionForm.userInfo
	delete state.completionForm.proProjectDocsList
	delete state.completionForm.providerId
}


// const submitForm = async (formEl: FormInstance | undefined) => {
// 	if (!formEl) return
// 	await formEl.validate((valid, fields) => {
// 		if (valid) {
// 			if ( Array.isArray(state.completionForm.developer) ){
// 				state.completionForm.developer = state.completionForm.developer.join(',');
// 			}
// 			if ( Array.isArray(state.completionForm.director)){
// 				state.completionForm.director = state.completionForm.director.join(',');
// 			}
// 			state.completionForm.status = 1
// 			http.post("/api/admin/project/update",state.completionForm).then(res =>{
// 				if (res.code === 200){
// 					init()
// 					toast.success("成功")
// 					state.completionDialogVisible = false;
// 				}
// 			})
//
// 		} else {
// 			console.log('error submit!', fields)
// 		}
// 	})
// }

/**
 * 初始化
 */
function init() {
	http.post('/api/admin/project/page', {
		  status: state.query.status,
			pageValidate:  state.pageValidate
	}).then((res: any) => {

		state.ProjectList = res.data.lists
		state.pageValidate.pageNo = res.data.pageNo
		state.pageValidate.pageSize = res.data.pageSize
		state.pageValidate.total = res.data.count
		console.log(state.ProjectList)
	})
}

function userInfo() {
	//获取用户信息列表
	http.get('/api/admin/user/list').then(res =>{
		state.userList = res.data
	})
}
userInfo()
/**
 * 头像上传
 */
// const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
// 	//显示视频
// 	state.updateFrom.imageUrl = response.data.url
// }

/**
 * 修改用户信息
 */
// function updateFrom() {
// 	postRequest('/api/admin/user/update', state.updateFrom).then((res: any) => {
// 		if (res.code === 200) {
// 			ElMessage.success('修改成功')
// 			init()
// 			state.updateDialogVisible = false
// 		} else {
// 			ElMessage.error(res.msg)
// 		}
// 	})
//
// }



/**
 * 分页
 * @param val
 */
const handleCurrentChange = (val: number) => {
	state.pageValidate.pageNo = val
	init()
}

init()

</script>
<style scoped>

:deep(.el-form-item__content) {
	width: 150px;
}

.pagination-container {
	display: flex;
	justify-content: center;
	margin-top: 20px; /* 可根据需要调整外边距 */
}

:deep(.el-dialog){
	background-color: #ebf0f9;
}

:deep(.avatar-uploader .el-upload) {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
	border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
